<template>
 <div class="main">
   <titleHeadSearchs></titleHeadSearchs>
   <el-row class="icon_list">

     <router-link to="/foodIndex">
       <el-col :span="6" class="txt_center icon_item">
         <div class="icon_box food"></div>
         <p class="icon_notice">美食</p>
       </el-col>
     </router-link>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box movie"></div>
       <p class="icon_notice">电影</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box hotel"></div>
       <p class="icon_notice">酒店</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box fun"></div>
       <p class="icon_notice">休闲娱乐</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box family"></div>
       <p class="icon_notice">亲子</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box plane"></div>
       <p class="icon_notice">旅游景点</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box life"></div>
       <p class="icon_notice">生活服务</p>
     </el-col>
     <el-col :span="6" class="txt_center icon_item">
       <div class="icon_box marry"></div>
       <p class="icon_notice">婚庆摄影</p>
     </el-col>

   </el-row>
   <el-row class="top_box">
     <el-row class="top_slide">
       <el-col :span="24">
         <el-carousel class="slide_box">
           <el-carousel-item v-for="(item, index) in imgGGArr" :key="index">
             <img height="300px" class="slide_item" :src="item" alt="">
           </el-carousel-item>
         </el-carousel>
       </el-col>
     </el-row>
   </el-row>
   <el-row class="restaurant_box">
     <el-row class="restaurant_guess">猜你喜欢</el-row>
     <el-row class="restaurant_item" v-for="(item) in restaurant_list" :key="item.name">
       <el-col :span="6" class="rest_box">
         <img :src="item.img" alt="">
       </el-col>
       <el-col :span="18" class="rest_notice">
         <div class="title_top">
           <div class="title_name">天伦理餐厅</div>
           <div class="title_star">
             <span class="star_notice">{{item.star}}</span>
             <span class="el-icon-star-off star_off"></span>
           </div>
           <div class="title_place">
             <span class="place_notice">{{item.place}}</span>
           </div>
         </div>
         <div class="title_middle">
           <span>{{item.main}}</span>
         </div>
         <div class="title_bottom">
           <div class="title_price">
             <span class="price"><span>¥</span><span>{{item.price}}</span></span>
             <div class="tuan">团</div>
           </div>
           <div class="title_join">{{item.join}}</div>
         </div>
       </el-col>
     </el-row>
   </el-row>
   <footers></footers>
 </div>
</template>

<script>
export default {
  data () {
    return {
      imgArr: ['../../static/img/food1.jpg', '../../static/img/food2.jpg', '../../static/img/food3.jpg'],
      imgGGArr: ['../../static/img/gg1.jpg', '../../static/img/gg2.jpg', '../../static/img/gg3.jpg'],
      place: '遂昌县',
      input: '',
      restaurant_list: [
        {
          name: '1天伦里餐厅',
          star: '4.0',
          place: '西湖北线/黄龙',
          main: '[杭帮/浙江菜] 天伦湖蟹套餐3-4人餐',
          price: 298,
          join: '加入团抢 >',
          img: '../../static/img/rest.jpg'
        },
        {
          name: '天伦里餐厅2',
          star: '4.0',
          place: '西湖北线/黄龙',
          main: '[杭帮/浙江菜] 天伦湖蟹套餐3-4人餐',
          price: 298,
          join: '加入团抢 >',
          img: '../../static/img/rest.jpg'
        },
        {
          name: '天伦里餐厅3',
          star: '4.0',
          place: '西湖北线/黄龙',
          main: '[杭帮/浙江菜] 天伦湖蟹套餐3-4人餐',
          price: 298,
          join: '加入团抢 >',
          img: '../../static/img/rest.jpg'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
  .main{
    background-color: #eeeeee;
  }
  .top_box{
    position: relative;
    @at-root .slide_box{
      height: 300px;
      @at-root  .slide_item{
        width: 100vw;
        height: 300px;
      }
    }
    @at-root .top_search{
      width: 100vw;
      height: 55px;
      font-size: 22px;
      position: absolute;
      top: 57px;
      z-index: 10;
      @at-root .search{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 25%;
      }
      @at-root .search_place{
        color: white;
        line-height: 55px;
        position: absolute;
      }
      @at-root .input_box{
        background-color: #ffffff;
        border-radius: 27px;
        padding-left: 5%;
        vertical-align: middle;
      }
      @at-root .input_model{
        display: inline-block;
        width: 80%;
        height: 100%;
        border: none;
      }
      @at-root .person_center{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        text-align: center;
        display: inline-block;
        right: 5%;
      }
    }
  }
  .icon_list{
    background-color: white;
    /*height: 410px;*/
    padding-top: 40px;
    padding-left: 67px;
    padding-right: 67px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eeeeee;
    @at-root .icon_item{
      margin-bottom: 40px;
      @at-root .icon_box{
        width: 100px;
        height: 100px;
        border-radius: 50px;
        display: inline-block;
        background-size: 75% 75%;
        background-position: center center;
        background-repeat: no-repeat;
      }
      @at-root .icon_notice{
        font-size: 29px;
        margin-top: 16px;
        color: #636363;
      }
      @at-root .food{
        background-image: url("../../../static/img/美食.png");
        background-color: #ff9213;
      }
      @at-root .movie{
        background-color: #eb1f22;
        background-image: url("../../../static/img/电影.png");
      }
      @at-root .hotel{
        background-color: #814ee7;
        background-image: url("../../../static/img/酒店.png");
      }
      @at-root .fun{
        background-color: #25cc63;
        background-image: url("../../../static/img/游戏.png");
      }
      @at-root .family{
        background-color: #1096ef;
        background-image: url("../../../static/img/奶瓶.png");
      }
      @at-root .plane{
        background-color: #f44089;
        background-image: url("../../../static/img/飞机.png");
      }
      @at-root .life{
        background-color: #fbc703;
        background-image: url("../../../static/img/生活.png");
      }
      @at-root .marry{
        background-color: #23baf3;
        background-image: url("../../../static/img/钻戒.png");
      }
    }

  }
  .restaurant_box{
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 25px;
    background-color: white;
    @at-root .restaurant_guess{
      font-size: 27px;
      line-height: 73px;
      color: #636363;
      border-bottom: 1px solid #dddddd;
    }
    @at-root .restaurant_item{
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #dddddd;
      @at-root .rest_box{
        font-size: 0;
        img{
          width: 160px;
          height: 160px;
        }
        @at-root .title_top{
          line-height: 32px;
          @at-root .title_name{
            font-size: 32px;
            font-weight: bold;
            color: #424242;
            display: inline-block;
          }
          @at-root .title_star{
            margin-left: 18px;
            display: inline-block;
            width: 95px;
            height: 32px;
            color: #f18928;
            border: 5px solid #f18928;
            border-radius: 20px;
            position: relative;
            @at-root .star_notice{
              display: inline-block;
              width: 63px;
              height: 100%;
              text-align: center;
            }
            @at-root .star_off{
              display: inline-block;
              text-align: center;
              width: 32px;
              height: 32px;
              color: white;
              border-radius: 100%;
              background-color: #f18928;
              line-height: 32px;
              position: absolute;
              right: -1px;
            }
          }
          @at-root .title_place{
            color: #424242;
            display: inline-block;
            font-size: 19px;
            margin-left: 50px;
          }
        }
        @at-root .title_middle{
          margin-top: 20px;
          color: #dddddd;
          height: 42px;
          line-height: 42px;
          font-size: 22px;
        }
        @at-root .title_bottom{
          font-size: 35px;
          line-height: 35px;
          color: #fa661e;
          @at-root .title_price{
            display: inline-block;
          }
          @at-root .price{
            font-weight: bold;
          }
          @at-root .tuan{
            display: inline-block;
            overflow: hidden;
            color: #f18928;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 6px;
            text-align: center;
            line-height: 36px;
            border: 3px solid #f18928;
            vertical-align:super;
          }
          @at-root .title_join{
            color: #d9764f;
            font-size: 19px;
            display: inline-block;
            margin-left: 210px;
            font-weight: bold;
            vertical-align: super;
          }
        }
      }
    }
  }
</style>
